<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!--
		编辑器：
			1,sublime
			2,H5Bulid
			3,Atom
			浏览器：
		主流运行环境
			1，IE
			2，火狐
			3，谷歌
			4，safari
		JS组成
			1,ECMAScript
			2,BOM 浏览器对象模型
			3,DOM 文档对象模型
		-->
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}

			ul {
				list-style:none;
				width:400px;
				height:393px;
				border:2px solid black;
				margin:100px auto;
			}
			ul li{
				width:370px;
				height:100px;
				padding:15px;
				border-bottom:1px solid black;
				cursor:pointer;
			}
			ul li:hover{
				color:blue;
			}
			ul li:nth-child(1){
				background-color:lavenderblush;
			}
			ul li:nth-child(2){
				background-color:lightcoral;
			}
			ul li:nth-child(3){
				border:none;
				background-color:lightblue;
			}
		</style>
	</head>
	<body>
		<ul class="list">
			<li class="item">
				<b>编辑器：</b><br>
				1,sublime <br>
				2,H5Bulid <br>
				3,Atom
			</li>
			<li class="item">
				<b>浏览器：主流运行环境 </b><br>
				1，IE <br>
				2，火狐 <br>
				3，谷歌 <br>
				4，safari
			</li>
			<li class="item">
				<b>JS组成:</b> <br>
				1,ECMAScript <br>
				2,BOM 浏览器对象模型 <br>
				3,DOM 文档对象模型
			</li>
		</ul>

	</body>
</html>
